HTML Figure

The HTML <figure> element is used to group media content (like images, videos, or diagrams) with a related caption. It is semantic, meaning it helps search engines and assistive technologies understand that the media and caption are related.

<!DOCTYPE html>
<html>
<body>
<figure>
<img src="kofar guga katsina.jpg" width="100%" height="250px">
<figcaption>Kofar Guga, Katsina, Katsina, Nigeria.</figcaption>
</figure>
</body>
</html>

Displaying Images with Captions

<!DOCTYPE html>
<html>
<body>
<figure>
<img src="developer.jpeg" width="100%" height="250px">
<figcaption>A developer infront of his computer.</figcaption>
</figure>
</body>
</html>

✔️ The caption explains the image’s context.

✔️ SEO benefits as search engines recognize image context.

Using <figure> for Videos

<!DOCTYPE html>
<html>
<body>
<figure>
<video controls width="100%" height="260px">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>2017_Global_Networking_Event_Opening_Video.</figcaption>
</figure>
</body>
</html>

The <figcaption> describes the video content.

<!DOCTYPE html>
<html>
<body>
<figure>
<blockquote>
"The only limit to our realization of tomorrow is our doubts of today."
</blockquote>
<figcaption>— Franklin D. Roosevelt</figcaption>
</figure>
</body>
</html>

The <figure> element is well-supported in modern browsers.

Styled Pigcaption

<!DOCTYPE html>
<html>
<head>
<style>
figure, figcaption {
font-style: italic;
text-align: center;
color: #555;
}
</style>
</head>
<body>
<figure>
<blockquote>
"The only limit to our realization of tomorrow is our doubts of today."
</blockquote>
<figcaption>— Franklin D. Roosevelt</figcaption>
</figure>
</body>
</html>

The <figure> element improves accessibility, structure, and readability for images, videos, charts, and blockquotes. It works best with <figcaption> to give meaningful descriptions and enhance SEO. Proper CSS styling ensures a professional layout.

*HTML Figure*

The HTML <figure> element is used to group media content (like images, videos, or diagrams) with a related caption. It is semantic, meaning it helps search engines and assistive technologies understand that the media and caption are related.

Displaying Images with Captions

✔️ The caption explains the image’s context. ✔️ SEO benefits as search engines recognize image context.

Using <figure> for Videos

The <figcaption> describes the video content.

The <figure> element is well-supported in modern browsers.

Styled Pigcaption

The <figure> element improves accessibility, structure, and readability for images, videos, charts, and blockquotes. It works best with <figcaption> to give meaningful descriptions and enhance SEO. Proper CSS styling ensures a professional layout.

HTML Figure

✔️ The caption explains the image’s context.

✔️ SEO benefits as search engines recognize image context.